<template>
  <div class="search-bar">
    <div class="content">
      <div style="width: 1240px;
      padding-right: 20px;
      padding-left: 20px;
    max-width: 1240px;
    min-width: 880px;
    display: flex;
    justify-content: space-evenly;align-items: center;gap:20px">

        <div style="display: flex;justify-content: space-around;gap:10px">
          <div>
            <svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_890_2337)">
                <path
                  d="M19.0018 0.662354H1.83502C0.93151 0.662354 0.200134 1.40649 0.200134 2.32576C0.200134 3.24504 0.93151 3.98917 1.83502 3.98917H19.0233C19.9268 3.98917 20.6582 3.24504 20.6582 2.32576C20.6582 1.40649 19.9053 0.662354 19.0018 0.662354H19.0018Z"
                  fill="white" />
                <path
                  d="M16.3988 6.7251H4.43799C3.53448 6.7251 2.8031 7.46923 2.8031 8.38851C2.8031 9.30778 3.53448 10.0519 4.43799 10.0519H16.4203C17.3238 10.0519 18.0552 9.30778 18.0552 8.38851C18.0552 7.46923 17.3022 6.7251 16.3987 6.7251H16.3988Z"
                  fill="white" />
                <path
                  d="M13.7958 12.8098H7.04095C6.13744 12.8098 5.40607 13.5539 5.40607 14.4732C5.40607 15.3925 6.13744 16.1366 7.04095 16.1366H13.8173C14.7208 16.1366 15.4522 15.3925 15.4522 14.4732C15.4523 13.5539 14.6995 12.8098 13.796 12.8098H13.7958Z"
                  fill="white" />
              </g>
              <defs>
                <clipPath id="clip0_890_2337">
                  <rect width="20.475" height="15.5167" fill="white" transform="translate(0.200073 0.649902)" />
                </clipPath>
              </defs>
            </svg>

          </div>
          <div style="height: 50px;color: #fff;">
            Filters
          </div>
        </div>
        <el-select v-model="queryParam.region" placeholder="Region" clearable @change="regionChange">
          <el-option v-for="item in regionoptions" :key="item.region" :label="item.region" :value="item.region" />
        </el-select>

        <el-select multiple collapse-tags collapse-tags-tooltip @change="search" :max-collapse-tags="1"
          v-model="queryParam.categories" placeholder="All categories" clearable>
          <el-option v-for="item in categoriesoptions" :key="item.name" :label="item.name" :value="item.name" />
        </el-select>

        <el-select multiple collapse-tags collapse-tags-tooltip @change="changewhere" :max-collapse-tags="1"
          v-model="wheres" placeholder="Attractions" clearable>

          <template #header>
            <el-input v-model="filterValue" @input="filterWhereoptions" />
          </template>
          <el-option v-for="item in filteredOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>


        <el-button v-if="hasAnyValue" style="border-color: #ffe0c6;" color="#ffb77b" @click="clear">Clear
          All</el-button>
        <p v-if="!hasAnyValue" style="width: 470px;height: 10px;"></p>

        <div style="display: flex;justify-content: center;height: 31.99px;">
          <el-input v-model="queryParam.title" style="min-width: 210px" placeholder="what are you looking for?">
            <template #prefix>
              <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5.80894 0.650012C2.66284 0.650012 0.0998535 3.30794 0.0998535 6.57057C0.0998535 9.8332 2.66298 12.4911 5.80894 12.4911C7.1696 12.4911 8.41945 11.9924 9.40194 11.1641L13.2653 15.1706C13.4959 15.4097 13.8713 15.4097 14.1019 15.1706C14.3325 14.9314 14.3325 14.5485 14.1019 14.3092L10.2386 10.3028C11.0388 9.28347 11.5182 7.98306 11.5182 6.57046C11.5182 3.30783 8.95506 0.649902 5.80911 0.649902L5.80894 0.650012ZM5.80894 1.87496C8.31659 1.87496 10.3368 3.97007 10.3368 6.5705C10.3368 9.17093 8.31648 11.266 5.80894 11.266C3.30139 11.266 1.28112 9.17093 1.28112 6.5705C1.28112 3.97007 3.30139 1.87496 5.80894 1.87496Z"
                  fill="#C4C4C4" />
              </svg>
            </template>
          </el-input>
          <el-button style="margin-left: 15px;" color="#FF8820" @click="search">Search</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { scenicList } from '@/api/index';

import { ref, computed, watch, defineEmits } from 'vue'
import { categories, region } from '@/api/index';
const filterValue = ref('');
// 定义发射的事件
const emit = defineEmits(['dataSent']);
const wheres = ref([])
const categoriesoptions = ref([])
const regionoptions = ref([])
const whereoptions = ref([])
const filteredOptions = ref([])
const value = ref([])
const loading = ref(false)
const queryParam = ref({
  title: "",
  where: "",
  region: "",
  categories: ""
});
const filterWhereoptions = () => {
  const lowerCaseFilterValue = filterValue.value.toLowerCase();
  filteredOptions.value = whereoptions.value.filter(item =>
    item.name.toLowerCase().includes(lowerCaseFilterValue)
  );
};

const getAttactions = (value) => {
  loading.value = true;
  scenicList({ page: 0, size: 50, region: value }).then(res => {
    if (res.content) {
      whereoptions.value = res.content;
      filterWhereoptions(); // 更新过滤后的选项
    }
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};
getAttactions()
function remoteMethod() {

  // if (query) {
  loading.value = true
  scenicList({ page: 0, size: 50 }).then(res => {
    if (res.content) {
      whereoptions.value = res.content
      loading.value = false
    }
    loading.value = false
  })


}
// function getAttactions(value) {
//   scenicList({page:0,size:50,region:value}).then(res=>{
//         if(res.content){
//           whereoptions.value = res.content
//             loading.value = false
//             filterWhereoptions()
//         }
//           loading.value = false
//     })
// }
function regionChange(value) {
  search();
  console.log(value)
  queryParam.value.where = ""
  getAttactions(value);
}
function clear() {
  queryParam.value = {
    title: "",
    where: "",
    region: "",
    categories: ""
  };
  search();
}
function changewhere(params) {
  

  queryParam.value.where = params.join(",")
  search();
}
remoteMethod()


categories().then(res => {
  categoriesoptions.value = res
})
region().then(res => {
  regionoptions.value = res
})
const options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
])
function search() {
  emit('dataSent', queryParam);
}

// 使用 computed 来定义检查属性是否有值的逻辑
const hasAnyValue = computed(() => {
  return Object.values(queryParam.value).some(value => {
    if (Array.isArray(value)) {
      return value.length > 0; // 数组不为空
    }
    return value !== null && value !== undefined && value !== '';
  });
});

// 使用 watch 来监视 queryParam 的变化
watch(queryParam, (newValue) => {
  console.log('queryParam 发生了变化');
  console.log('新的值：', newValue);
  console.log('是否有属性有值：', hasAnyValue.value);
}, { deep: true }); // 深度监视 queryParam 对象的所有属性


</script>
<style>
.search-bar {
  background: rgba(255, 128, 38, 0.6);
  display: flex;
  justify-content: center;
  height: 98px;
  line-height: 98px;
}

.content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.filter {
  display: flex;
  height: 40px;
  background-color: #fff;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  border-radius: 6px;
}

.search {
  height: 40px;
  border: none;
  padding: 5px;

  display: flex;
  align-items: center;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 5px;
  max-width: 300px;
}

.search {
  border: none;
  outline: none;

  padding: 5px;
}

.search:focus {
  border: none;
  outline: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.el-button>span {
  align-items: center;
  display: inline-flex;
  color: #fff;
}

/* .el-select__selection{
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    position: relative;
    height: 30px;
  } */
</style>